<script>
// 动态表格
import {SelectConfig, TableConfig} from "./TableType";
import RenderUtils from "./RenderUtils";
import typeOfUtils from "../../utils/type-of-utils";

export default {
	name: "DynamicTable",
	// 定义用到的组件
	components: {},
	// 自定义指令，这里定义局部指令
	directives: {},
	// 过滤器
	filters: {},
	// 定义用到的混入，可以重复使用代码
	mixins: [],
	// 属性定义使用对象的形式进行定义
	props: {
		tableConfig:{
			type:TableConfig,
			default:()=>{}
		},
		data: {
			type:Array,
			default:()=>[]
		},
		select:Boolean, // 开启选择
		selectMultiple:Boolean, // 开启多选 -- 受select限制
		selectConfig: { // 选择配置
			type:SelectConfig,
			default:()=>{}
		},
    maxHeight: {
      type: Number,
      default: undefined
    },
    showIndex:{
      type:Boolean, // 显示序号
      default:false
    },
    indexConfig: {
      type: Object,
      default: () => {
        return {
          indexFirstNumber: 0, // 序号起始值 表格index+indexFirstNumber
        }
      }
    }
	},
	// 定义变量
	data() {
		return {
			zhixinRadio: undefined,
		}
	},
	// 定义计算属性值，加上watch配合，可以读取vuex异步获取的值
	computed: {
		// indexProps(){
		//   return this.test;
		// },
		// indexProps2: {
		//		get(){
		//			//return this.name.split('').reverse().join('');
		//			return this.firstName+''+this.lastName;
		//		},
		//		set(value){
		//		}
		// }
	},
	// 监听属性值的变化
	watch: {
		// indexProps(val){
		//   console.log(val)
		// },
		// indexProps2: {
		//   handler(value, oldValue) {
		//
		//   },
		//   immediate: true,
		//   deep: true
		// }
	},
	// 生命周期钩子函数begin
	// 在页面节点挂载完执行
	mounted() {
	},
	// 在页面创建完执行
	created() {
	},
	render(createElement, context) {
		const children = []
		children.push(...RenderUtils.select(this,createElement))
		children.push(...RenderUtils.showIndex(this,createElement))
		children.push(...RenderUtils.children(this,createElement,this.tableConfig.tableItems))
		children.push(...RenderUtils.slots(this))
    if (this.$scopedSlots.default) {
      children.push(...this.$scopedSlots.default()) // 直接支持写 el-table-column 虽然支持但是都是加载后面
    }
		return createElement('el-table',{
			ref:'elTableRef',
			props: {
				...this.$attrs,
				...this.tableConfig,
				data: this.data,
        'max-height':this.maxHeight
			},
			class:{
				DynamicTableIndex: true
			},
			on: {
				...this.$listeners,
				...this.tableConfig.events,
				'selection-change':(selection)=>{
					this.$emit('selection-change',selection)
				},
				'row-click': this._rowClick
			}
		},children)
	},
	// 生命周期钩子函数end
	// 定义方法
	methods: {
    _rowClick(row, column, event) {
      let select = true
      const findIndex = row.__zhixin$index
      if (typeOfUtils.isFunction(this.selectConfig?.selectable)) { // 单选判断这一行是否支持选择
        select = this.selectConfig.selectable(row, findIndex)
      }
      if (this.select && select) {
        if (!this.selectMultiple) { // 如果是单选
          if (findIndex === this.zhixinRadio) { // 判断单选的时候是不是点击同一个位置，是就把这个取消
            this.zhixinRadio = undefined
            this.$emit('selection-change', [])
          } else {
            this.zhixinRadio = findIndex
            this.$emit('selection-change', [row])
          }
        } else { // 这是多选的时候 同样判断是否可以
          this.$refs.elTableRef.toggleRowSelection(row)
        }
      }
      this.$emit('row-click', row, column, event)
    }
  },
}
</script>
<style scoped lang="scss">
.DynamicTableIndex {
	.zhixin_radio_not_show_label{
		::v-deep{
			.el-radio__label{
				display: none;
			}
		}
	}
}
</style>
